<template>
  <div style="padding: 0 50px">
    <vxe-toolbar>
      <template v-slot:buttons>
        <vxe-button @click="showHeader = !showHeader">显示/隐藏表头</vxe-button>
      </template>
    </vxe-toolbar>
    <!--
      1. 显示或隐藏表头使用参数：
      :show-header="showHeader"
      2. 表格列宽拖动使用参数
      resizable
      3. 表格高度自适应时可以设置最大高度
      max-height="450"或max-height="100"
      4. 表格末尾加入两行数据一个平均值，一个求和,详见main.js文件中的footerMethod方法
      也就是xeutils中的求和求平均值函数的用法
      -->
    <vxe-table border highlight-hover-row :show-header="showHeader" resizable show-overflow max-height="450"
      class="mytable-scrollbar" show-footer :footer-method="footerMethod" :data="tableData">
      <vxe-table-column type="seq" width="60" title="序号"></vxe-table-column>
      <vxe-table-column field="name" title="姓名"></vxe-table-column>
      <vxe-table-column field="sex" title="性别"></vxe-table-column>
      <vxe-table-column field="age" title="年龄"></vxe-table-column>
      <vxe-table-column field="date" title="日期"></vxe-table-column>
      <vxe-table-column field="address" title="地址"></vxe-table-column>
    </vxe-table>
  </div>
</template>

<script>
import XEUtils from "xe-utils";
  export default {
    data() {
      return {
        tableData: [],
        showHeader: true
      }
    },
    created() {
      var list = [];
      for (var index = 0; index < 5; index++) {
        list.push({
          name: 'test' + index,
          role: 'developer',
          sex: '男',
          age: index + 18,
          date: '2019-05-01',
          time: 1556677810888 + index * 500,
          region: 'ShenZhen',
          address: '河北省保定市易县裴山镇南庄村酒厂大渠往西的向阳村居委会' + index
        })
      }
      this.tableData = list
    },
    methods: {
      footerMethod({ columns, data }) {
        const means = [];
        const sums = [];
        columns.forEach((column, columnIndex) => {
          if (columnIndex === 0) {
            means.push('平均');
            sums.push('和值');
          } else {
            let meanCell = null;
            let sumCell = null;
            switch (column.property) {
              case 'age':
              case 'rate':
                console.log(111, data);
                console.log(222, column.property);
                // mean (obj, iterate [, context]) 求平均值函数
                meanCell = parseInt(XEUtils.mean(data, column.property));
                sumCell = XEUtils.sum(data, column.property);
                break
            }
            means.push(meanCell);
            sums.push(sumCell)
          }
        });
        // 返回一个二维数组的表尾合计
        return [means, sums]
      }
    }
  }
</script>
